import styles from "../style.less";

import React, { Fragment } from "react";
import { getMenuBars } from "./helper";
import remixiconUrl from "remixicon/fonts/remixicon.symbol.svg";
import cs from "classnames";

export default ({ editor }) => {
  const items: any = getMenuBars(editor);

  return (
    <div className={styles.header}>
      {items.map((item, index) => (
        <Fragment key={index}>
          {item.type === "divider" ? (
            <div className={styles.divider} />
          ) : (
            <button
              className={cs(styles.menuItem, {
                [styles.isActive]: item.isActive && item.isActive(),
              })}
              onClick={item.action}
              title={item.title}
            >
              <svg className={styles.remix}>
                <use xlinkHref={`${remixiconUrl}#ri-${item.icon}`} />
              </svg>
            </button>
          )}
        </Fragment>
      ))}
    </div>
  );
};
